import React, { Component } from "react";

// 第二步
// connect是一个函数，这个函数的返回值是一个高阶组件
import { connect } from "react-redux";
// connect还需要两个函数作为参数

// 将仓库的state的值映射到组件的props里面
// const mapStateToProps = (state) => {
//   return {
//     // 将仓库里面的count的值映射到组件的props的com_count
//     com_count: state.count,
//   };
// };

// // 将仓库的方法映射到组件的props里面
// const mapDispatchToProps = (dispatch) => {
//   return {
//     // 只需要执行这个add方法，就相当于执行了仓库的dispatch({ type: "increment" })
//     add(num) {
//       dispatch({ type: "increment", num });
//     },
//     minus() {
//       dispatch({ type: "decrement" });
//     },
//   };
// };

class App extends Component {
  render() {
    // console.log(this.props);
    return (
      <>
        {/* <h2>react-redux-计数器</h2>
        <button onClick={() => store.dispatch({ type: "decrement" })}>-</button>
        <span>{store.getState().count}</span>
        <button onClick={() => store.dispatch({ type: "increment" })}>+</button> */}

        <h2>react-redux-计数器</h2>
        <button onClick={this.props.minus}>-</button>
        <span>{this.props.com_count}</span>
        <button onClick={() => this.props.add(2)}>+</button>
        <button onClick={() => this.props.add(3)}>+</button>
      </>
    );
  }
}

export default connect(
  (state) => {
    return {
      // 将仓库里面的count的值映射到组件的props的com_count
      com_count: state.count,
    };
  },
  (dispatch) => {
    return {
      // 只需要执行这个add方法，就相当于执行了仓库的dispatch({ type: "increment" })
      add(num) {
        dispatch({ type: "increment", num });
      },
      minus() {
        dispatch({ type: "decrement" });
      },
    };
  }
)(App);
